<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- The main menu: a card and some buttons -->
    <div class="card text-white bg-dark centered" id="main-menu">
        <div class="card-header text-center">
            <h1>Influence</h1>
        </div>
        <div class="card-body text-center">
            <button id="continue" type="button" class="btn btn-primary w-50 my-1 hidden">Continue</button>
            <button id="random-map" type="button" class="btn btn-primary w-50 my-1">Random Map</button>
            <button id="tutorial-maps" type="button" class="btn btn-primary w-50 my-1">Tutorial Maps</button>
            <button id="Credits" type="button" class="btn btn-primary w-50 my-1">Credits</button>
        </div>
    </div>


    <!-- The tutorial menu: a card and some buttons -->
    <div class="card text-white bg-dark centered hidden" id="tutorial-menu">
        <div class="card-header text-center">
            <h1>Tutorial</h1>
        </div>
        <div class="card-body text-center">
            <button id="tutorial_1" type="button" class="btn btn-primary w-50 my-1">Rules</button>
            <button id="tutorial_2" type="button" class="btn btn-primary w-50 my-1">Merchnants and Competition</button>
            <button id="tutorial_3" type="button" class="btn btn-primary w-50 my-1">Tributes</button>
            <button id="tutorial_4" type="button" class="btn btn-primary w-50 my-1">Adversity</button>
            <button id="tutorial_5" type="button" class="btn btn-primary w-50 my-1">Spread</button>
            <button id="tutorial_back" type="button" class="btn btn-primary w-50 my-1">Back</button>
        </div>
    </div>

    <!-- The random map menu -->
    <div class="card text-white bg-dark centered hidden" id="random-menu">
        <div class="card-header text-center">
            <h1>Random Map</h1>
        </div>
        <div class="card-body text-center">
            <div>
              <label for="size">Map size:</label>
              <input type="number" id="map_size" class="random_map_input" name="map_size" min="8" value="9">
            </div><div>
              <label for="size">Water tiles:</label>
              <input type="number" id="water_percentage" class="random_map_input" name="water_percentage" min="0" max="100" value="0">
            </div><div>
              <label for="size">Continuity of water tiles:</label>
              <input type="number" id="water_continuity" class="random_map_input" name="water_continuity" min="0" max="100" value="20">
            </div><div>
              <label for="size">Forest tiles:</label>
              <input type="number" id="forest_percentage" class="random_map_input" name="forest_percentage" min="0" max="100" value="20">
            </div><div>
              <label for="size">Mountains ranges:</label>
              <input type="number" id="mountain_percentage" class="random_map_input" name="mountain_percentage" min="0" max="100" value="10">
            </div><div>
              <label for="size">Island:</label>
              <input type="checkbox" id="is_island" class="random_map_input" name="is_island" checked>
            </div><div>
              <label for="size">Blue player:</label>
              <input type="checkbox" id="blue" class="random_map_input" name="blue" checked>
            </div><div>
              <label for="size">Green player:</label>
              <input type="checkbox" id="green" class="random_map_input" name="green" checked>
            </div><div>
              <label for="size">Red player:</label>
              <input type="checkbox" id="red" class="random_map_input" name="red" checked>
            </div><div>
              <label for="size">Violet player:</label>
              <input type="checkbox" id="violet" class="random_map_input" name="violet">
            </div>


            <button id="random_back" type="button" class="btn btn-primary random-menu-button my-1">Back</button>
            <button id="start" type="button" class="btn btn-primary random-menu-button my-1">Start</button>
        </div>
    </div>

    <!-- The credits page -->
    <div class="card text-white bg-dark centered hidden" id="credits-page">
        <div class="card-header text-center">
            <h1>Credits</h1>
        </div>
        <div class="card-body text-center">
            <p><b>Hex tiles</b> from Elite Command by Chris Vincent <a href="http://www.chrisvincentonrails.com/">www.chrisvincentonrails.com/</a> distributed by <a href=https://opengameart.org/content/pixel-art-terrain-from-elite-command>OpenGameArt</a>.</p>

            <p><b>City sprites</b> from Toen's Medieval Strategy Sprite Pack v1.0 by Andre Mari Coppola. <a href= https://opengameart.org/content/toens-medieval-strategy-sprite-pack-v10-16x16>OpenGameArt</a>.</p>

            <p><a href= https://github.com/rantahar/influence>Source code on GitHub</a>.</p>
          <button id="credits-back" type="button" class="btn btn-primary w-50 my-1">Back</button>
        </div>
    </div>


    <!-- A popup that appears in the lower half of the window and contains text and a dismiss button -->
    <div class="card text-white bg-dark" id="popup">
        <div class="card-header">
            <b id="popup_title"></b>
        </div>
        <div class="card-body text-center">
            <div id="popup_content"></div>
            <div class="text-right">
                <span id="popup_next" type="button" class="btn btn-sm btn-primary my-2">Next</span>
                <span id="popup_dismiss" type="button" class="btn btn-sm btn-primary my-2">Dismiss</span>
            </div>
        </div>
    </div>


    <!-- The game itself. Like the menus, takes the full screen and starts hidden -->
    <div id="scenario-div" class="container-fluid fill">
            <!-- The UI panel on the left side -->
            <div id="panel_column" class="text-white flex-column bg-dark d-flex pr-0">
                <!-- Display the turn count -->
                <h1 id="turn_number_text">Year 1</h1>
                <!-- Card containing the navigation tabs and the panels -->
                <div class="card text-white h-100 bg-dark flex-column d-flex pr-0">
                    <!-- The navigation tabs, home and city -->
                    <ul class="nav nav-tabs card-header-tabs" id="panel-tabs" role="tablist">
                        <li class="nav-item bg-dark" role="presentation">
                            <a class="nav-link bg-dark active" data-toggle="tab" href="#home" id="home-tab">Home</a>
                        </li>
                        <li>
                            <a class="nav-link bg-dark" data-toggle="tab" href="#city" id="city-tab">City</a>
                        </li>
                        <li>
                            <a class="nav-link bg-dark" data-toggle="tab" href="#advisor" id="advisor-tab">Advisor</a>
                        </li>
                    </ul>
                    <!-- The main content of the panel in a card body -->
                    <div class="card-body h-100 flex-column d-flex pl-0">

                        <!-- The content of the tabs. Only the active one is displayed -->
                        <div class="tab-content pl-0" id="panel-content">
                            <!-- The home panel, contains tile and player info, which are filled in by the game -->
                            <div class="tab-pane active text-white" id="home" role="tabpanel">
                                <div class="card bg-dark"><div class="card-body bg-dark" id="tile_info"></div></div>
                                <div class="card bg-dark"><div class="panel_card card-body bg-dark" id="player_info"></div></div>
                            </div>

                            <!-- The city panel, filled in by the game -->
                            <div class="tab-pane text-white1" id="city" role="tabpanel">
                                <div class="card bg-dark"><div class="panel_card card-body bg-dark" id="city_card"></div></div>
                            </div>

                           <!-- The advisor panel, filled in by the game -->
                           <div class="tab-pane text-white1" id="advisor" role="tabpanel">
                               <div class="card bg-dark"><div class="panel_card card-body bg-dark" id="advisor_card"></div></div>
                           </div>
                        </div>

                        <!-- Include next turn and main menu buttons, which are constant -->
                        <button id="next_turn_button" type="button" class="btn btn-success"><u>N</u>ext Turn</button>
                        <button id="main_menu_button" type="button" class="btn btn-primary">Main Menu</button>
                    </div>
                </div>
            </div>
            <!-- Container for the phaser game. Phaser will add the canvas. -->
            <div id="game_container" class="pl-0 pr-0">
                <!-- This is useful for cleanly destroying the Phaser game -->
              <div class='pl-0' id='Container'></div>
            </div>
    </div>


    <!-- Predefined maps and random map generator -->
    <script src="src/maps.js"></script>
    <!-- AI players and script -->
    <script src="src/ai.js"></script>
    <!-- City behaviour -->
    <script src="src/city.js"></script>
    <!-- Everything else... -->
    <script src="src/main.js"></script>

</body>
</html>
